<template>
      <div class="app-container" v-loading="loading3">
        <!--主表信息-->
        <el-form ref="form" class="modalform":inline="true" label-width="120px">
          <div>
            <el-form-item label="客户名称" prop="name">
              <el-input :value="form.name" readonly style="width: 300px;"/>
            </el-form-item>
          </div>
          <el-form-item label="预收款余额">
            <el-input :value="attachUnit2(form.prebalance, '元')" readonly />
          </el-form-item>
          <el-form-item label="在途订单金额">
            <el-input :value="attachUnit2(form.prebalanceUsabling, '元')" readonly />
          </el-form-item>
          <el-form-item label="可用余额">
            <el-input :value="attachUnit2(form.prebalanceUsable, '元')" readonly />
          </el-form-item>
        </el-form>
        <el-link type="primary" :underline="false" icon="el-icon-refresh" style="float: right;" @click="refresh"/>
        <p>交易记录：</p>
        <el-table v-loading="loading2" :data="cashflows">
          <!--        <el-table-column label="类型" align="center" prop="typename" />-->
          <el-table-column label="编号" align="center" prop="code" />
          <el-table-column label="金额(元)" align="center" prop="amount" />
          <el-table-column label="余额(元)" align="center" prop="prebalance" />
          <el-table-column label="备注" align="center" prop="remark"/>
          <el-table-column label="操作人" align="center" prop="operator" />
          <el-table-column label="操作时间" align="center" prop="createtime" />
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getCusCashflow"
        />
        <p>在途订单：</p>
        <el-table v-loading="loading" :data="orders">
          <el-table-column label="订单编号" align="center" prop="sellcode" />
          <el-table-column label="订单金额(元)" align="center" prop="finalamount" />
          <el-table-column label="状态" align="center" prop="statusname" />
          <el-table-column label="下单人" align="center" prop="applyname" />
          <el-table-column label="下单时间" align="center" prop="createtime" />
        </el-table>
      </div>
</template>

<script>
  import { getCustomer2, getCusCashflow } from "@/api/customer/customer";
  import variables from '@/assets/styles/variables.scss'
  import { getCurrPermis } from "@/api/public";

  export default {
    name: 'custcashflowinfo',
    components: {
    },
    data() {
      return {
        loading: true,
        loading2: true,
        loading3:false,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        cashflows: [],
        queryParams: {
          pageNum: 1,
          pageSize: 8,
          customerid: null,
        },
        permission: [],
        fileList: [],
        orders: [],
      }
    },
    computed: {
      variables() {
        return variables;
      },
    },
    async created() {
      this.id = this.$route.query.id;
      // this.getPermis();
      await this.getCustomer();
      this.getCusCashflow();
    },
    methods: {
      async refresh(){
        this.loading3=true;
        await this.getCustomer();
        this.getCusCashflow();
      },
      //查询预收款明细
      getCusCashflow(){
        this.queryParams.customerid = this.form.guid;
        getCusCashflow(this.queryParams).then(response => {
          this.cashflows = response.rows;
          this.total = response.total;
          this.loading2 = false;
          this.loading3=false;
        });
      },
      async getCustomer() {
        await getCustomer2({id: this.id}).then(response => {
          this.form = response.data;
          this.orders = response.data.sellforms;
          this.loading = false;
        })
      },
      // 取消按钮
      cancel2() {
        this.open2 = false;
        this.reset2();
      },
      /** 结算按钮操作 */
      handleSettle(guid) {
        this.reset2();
        getWlinfo(guid).then(response => {
          this.reset2();
          this.form2 = response.data;
          this.open2 = true;
          this.title = `物流订单结算(编号：${this.form2.code})`;
        });
      },
      // 表单重置
      reset2() {
        this.form2 = {
          guid: null,
          code: null,
          wlguid: null,
          wlcode: null,
          customerid: null,
          customername: null,
          freightclaim: null,
          faretype: null,
          deliprovince: null,
          delicity: null,
          delidistrict: null,
          deliaddress: null,
          arriprovince: null,
          arricity: null,
          arridistrict: null,
          arriaddres: null,
          drivername: null,
          driverphone: null,
          carcode: null,
          delicontact: null,
          delicontacttel: null,
          arricontact: null,
          arricontactno: null,
          senddate: null,
          arrivedate: null,
          loadtime: null,
          unloadtime: null,
          fareprice: null,
          farepricetype: null,
          status: 0,
          amount: null,
          fareweight: null,
          type: null,
          operatorid: null,
          operator: null,
          createtime: null,
          lastupdate: null,
          approvalflag: null,
          containerno: null,
          deliport: null,
          arriport: null,
          othercost: null,
          otherremark: null,
          deductamount: null,
          deductremark: null,
          befdeductamount: null,
          transtype: null,
          flowid: null,
          relatedid: null,
          departid: null,
          departname: null,
          environment: null,
          lifttype: null,
          arriportcountry: null,
          transclause: null,
          remark: null,
          shipcompany: null,
          shipname: null,
          shipcode: null,
          liftcode: null,
          boxtype: null,
          boxsize: null,
          boxcode: null,
          delifactory: null,
          cargodate: null,
          cartype: null,
          mainidsea: null,
          kdcode: null,
          sort: null,
          hook: null,
          orgid: null,
          orgname: null,
          paystatus: null
        };
        this.resetForm("form2");
      },
      takeLinkcode(items) {
        if (!items) return;
        let txt = '';
        items.forEach((item, index) => {
          if (index == 0) {
            txt = txt.concat(item.linkcode);
          } else {
            txt = txt.concat(',' + item.linkcode);
          }
        })
      },
      getPermis() {
        getCurrPermis().then(response => {
          this.permission = response.data;
          console.log('this.permission:', this.permission)
        });
      },
      takeLinkcode(items) {
        if (!items) return;
        let txt = '';
        items.forEach((item, index) => {
          if (index == 0) {
            txt = txt.concat(item.linkcode);
          } else {
            txt = txt.concat(',' + item.linkcode);
          }
        })
        return txt;
      },
      /** 新增按钮操作 */
      handleAdd() {
        // this.reset();
        this.getWlinfos();
        this.open = true;
        this.title = "添加物流订单";
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.guid)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      takePriceUnit(fptype) {
        let txt = '';
        if (fptype == 1) {
          txt = '元/车';
        } else if (fptype == 2) {
          txt = '元/吨';
        }
        return txt;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getWlinfos();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleFareAdd(type) {
        // this.getRwCorps();
        this.fareApply.projId = this.farepay.id;
        this.fareApply.txnType = 2;
        this.title = '运费登记';
        this.open = true;
        // this.getCusOptions(this.fareApply.projId, this.fareApply.customerId);
      },
      handleFarePass() {

      },
      addFareApply() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // if (this.fareApply.amount <= 0) {
            //   this.msgInfo('金额不能为零小于零');
            //   return;
            // }
            // this.loading = true;
            // addFareApply(this.fareApply).then(response => {
            //   this.msgSuccess("登记成功");
            //   this.loading = false;
            //   this.open = false;
            //   this.fareApply = {};
            //   this.getProDetail();
            //   this.currLabel = 'fare';
            // });
          }
        })
      },
      cancel() {
        this.open = false;
        this.fareApply = {};
      },
      /** 查询运费支付 **/
      async getFarepay() {
        this.loading = true;
        await getFarepay(this.id).then(response => {
          this.loading = false;
          this.farepay = response.data;
          this.queryParams.customerid = this.farepay.supplierId;
          this.queryParams.orgid = this.farepay.orgguid;
          //files回显
          this.fileList = this.farepay.files.map(item => {
            return {
              id: item.guid,
              name: item.imagename,
              url: item.url
            }
          });
        });
      },
      /** 查询待结算物流订单 **/
      getWlinfos() {
        this.loading = true;
        getWlInfoList(this.queryParams).then(response => {
          console.log('response:', response)
          this.wlinfoList = response.rows;
          console.log('this.wlinfoList:', this.wlinfoList)
          this.total = response.total;
          this.loading = false;
        });
      },

      /** 提交按钮 */
      submitForm() {
        let params = {
          farepayGuid: this.farepay.id,
          wlinfoids: this.ids.join(',')
        };
        addFarepDetail(params).then(response => {
            this.msgSuccess("添加成功");
            this.open = false;
            this.getFarepay()
          });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除该数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delFarepDetail(ids);
        }).then(() => {
          this.getFarepay()
          this.msgSuccess("删除成功");
        })
      },

      //上传相关
      handlePreview(file) {
        if (file.url) {
          let url = `http://${location.host}/prod-api${file.url}`;
          location.href = url;
        }
      },
      // beforeRemove(file, fileList) {
      //   return this.$confirm(`确定移除 ${file.name}？`);
      // },
      // handleUpload(response, file, fileList) {
      //   if (response.code == 200) {
      //     this.fileList.push({id: response.id, name: response.originalName, url: response.url});
      //   }
      // },
      handleRemove(file, fileList) {
        this.fileList = this.fileList.filter(item => {
          return item.id != file.id;
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$sideBarWidth});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px)
  }

  .mobile .fixed-header {
    width: 100%;
  }

  .app-wrapper > > > .el-input {
    color: #999;
  }

  .upload {
    /*margin-top: 20px;*/
  }

  .rj-input {
    display: inline-block;
    height: 26px;
    line-height: 26px;
  }

  .rj-label {
    font-size: 14px;
    color: #606266;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    font-weight: 600;
    display: inline-block;
    text-align: right;
  }

  .rj-text {
    color: #606266;
    font-size: inherit;
    padding: 0 15px;
    font-size: 14px;
    display: inline-block;
  }

  .modalform .el-form-item {
    margin-bottom: 0 !important;
  }
  .modalinput {
    width: 260px !important;
  }
</style>
